<template>
  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>添加数据源</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item
        label="连接名"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="pollName"
      >
        <a-input placeholder="填写连接名称" v-model="form.pollName"/>
      </a-form-model-item>
      <a-form-model-item
        label="类型"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="dbType"
      >
        <a-select placeholder="请选择数据库类型" style="width: 100%" allow-clear v-model='form.dbType' @change='changeDbType'>
          <a-select-option value="mysql">Mysql</a-select-option>
          <a-select-option value="oracle">Oracle</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="主机"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="host"
      >
        <a-input placeholder="填写主机" v-model="form.host" @blur='changeUrl'/>
      </a-form-model-item>
      <a-form-model-item
        label="端口"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="port"
      >
        <a-input placeholder="填写端口" v-model="form.port" @blur='changeUrl'/>
      </a-form-model-item>
      <a-form-model-item
        label="数据库名"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="dbName"
      >
        <a-input placeholder="填写数据库名" v-model="form.dbName" @blur='changeUrl'/>
      </a-form-model-item>
      <a-form-model-item
        label="用户名"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="username"
      >
        <a-input placeholder="填写用户名" v-model="form.username"/>
      </a-form-model-item>
      <a-form-model-item
        label="密码"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="password"
      >
        <a-input-password placeholder="填写密码" v-model="form.password"/>
      </a-form-model-item>
      <a-form-model-item
        label="地址"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="url"
      >
        <a-input placeholder="填写数据库地址" v-model="form.url" :disabled='true'/>
      </a-form-model-item>
      <a-form-model-item
        label="链接驱动"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="driverClassName"
      >
        <a-input placeholder="填写链接驱动" v-model="form.driverClassName" :disabled='true'/>
      </a-form-model-item>
    </a-form-model>
    <div class="bottom-control">
      <a-space>
        <a-button type="primary" @click="submitForm">
          保存
        </a-button>
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>
<script>
import { addDataSource } from '@/api/tool/gen'

export default {
  components: {},
  props: {},
  data () {
    return {
      open: false,
      form: {
        dbType: undefined,
        driverClassName: undefined,
        password: undefined,
        pollName: undefined,
        url: undefined,
        username: undefined,
        host: undefined,
        port: undefined,
        dbName: undefined
      },
      rules: {
        pollName: [{ required: true, message: '连接池名称不能为空', trigger: 'blur' }],
        host: [{ required: true, message: '主机不能为空', trigger: 'blur' }],
        port: [{ required: true, message: '端口不能为空', trigger: 'blur' }],
        dbName: [{ required: true, message: '数据库不能为空', trigger: 'blur' }],
        dbType: [{ required: true, message: '数据库类型不能为空', trigger: 'blur' }],
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        url: [{ required: true, message: '数据库地址不能为空', trigger: 'blur' }],
        driverClassName: [{ required: true, message: '链接驱动不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {},
  computed: {},
  methods: {
    onClose () {
      this.open = false
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.rest();
      this.open = true
      this.formTitle = '添加数据源'
    },
    rest () {
      this.form = {
        dbType: undefined,
        driverClassName: undefined,
        password: undefined,
        pollName: undefined,
        url: undefined,
        username: undefined,
        host: undefined,
        port: undefined,
        dbName: undefined
      }
    },
    submitForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          addDataSource(this.form).then(res => {
            if (res.code === 200) {
              this.$message.success(
                '添加成功',
                3
              )
              this.open = false
            }
          })
        }
      })
    },
    changeUrl () {
      if (this.form.dbType === 'mysql') {
        this.form.url = 'jdbc:mysql://' + this.form.host + ':' + this.form.port + '/' + this.form.dbName
      }
      if (this.form.dbType === 'oracle') {
        this.form.url = 'jdbc:oracle:thin:@' + this.form.host + ':' + this.form.port + '/' + this.form.dbName
      }
    },
    changeDbType (dbType) {
      if (dbType === 'mysql') {
        this.form.url = 'jdbc:mysql://' + this.form.host + ':' + this.form.port + '/' + this.form.dbName
        this.form.driverClassName = 'com.mysql.cj.jdbc.Driver'
        this.form.port = 3306
      }
      if (dbType === 'oracle') {
        this.form.url = 'jdbc:oracle:thin:@' + this.form.host + ':' + this.form.port + '/' + this.form.dbName
        this.form.driverClassName = 'oracle.jdbc.driver.OracleDriver'
        this.form.port = 1521
      }
    }
  },
  created () {},
  mounted () {}
}
</script>,
<style lang="scss" scoped>
</style>
